<template>
	<view class="box padding-30">
		<view class="bg-white padding-20 border-radio-14">
			<view class="info-confirm align-items-center">
				<view class="img-box">
					<image :src="info.image"> </image>
				</view>
				<view class="title color-0 fs-30">
					{{info.title}}
				</view>
			</view>
			<view class="solid"></view>
			<view v-if="list && list.length">
				<view v-for="(item,index) in list" :key="index" class="info-list" @click="addPatient">
					<view class="fw-b fs-30 color-0">{{item.address}}</view>
					<view class="color-4d fs-24 margin-t-10">
						{{item.name}}
						<text class="margin-l-20">{{item.contact}}</text>
					</view>
					<view class="icon-box">
						<u-icon name="arrow-right" color="#999" size="18"></u-icon>
					</view>
				</view>
			</view>
			<view v-else class="align-items-center add-box fs-30 color-9" @click="addPatient">
				<image src="/static/image/service/icon-add.png" mode="widthFix"></image>
				<text>添加患者人员信息</text>
			</view>
		</view>
		<view class="bg-white padding-20 border-radio-14 margin-t-20">
			<view class="title fs-28 color-0 fw-b margin-b-20">
				预约服务
			</view>
			<view class="fs-28 list-box justifyContent-spaceBetween" @click="show=true">
				<text class="color-333">预约服务时间</text>
				<view class=" color-0 flex-box">
					<text>{{from.yuyue_time|| "选择预约服务时间"}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="fs-28 list-box justifyContent-spaceBetween" @click="show=true">
				<text class="color-333">服务次数</text>
				<view class="num-box color-0 flex-box">
					<u-number-box v-model="from.count" :integer='true'>
						<view slot="minus" class="minus">
							<image src="/static/image/service/num-minus.png" mode="widthFix"></image>
						</view>
						<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{from.count}}</text>
						<view slot="plus" class="plus">
							<image src="/static/image/service/num-add.png" mode="widthFix"></image>
						</view>
					</u-number-box>
				</view>
			</view>
			<view class="fs-28 list-box justifyContent-spaceBetween" @click="show=true">
				<text class="color-333">服务费用/次</text>
				<view class=" color-0 flex-box">
					<text>￥{{(Number(info.price) * from.count).toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<view class="margin-t-20">
			<view class="title fs-28 color-0 fw-b margin-b-20">
				备注
			</view>
			<view class="bg-white border-radio-14 padding-20">
				<textarea name="" id="" cols="30" placeholder="请输入备注" rows="10" v-model="from.remark"></textarea>
			</view>
		</view>
		<view class="pay-box bg-white justifyContent-spaceBetween">
			<view class="fs-28 color-333">
				合计：
				<text class="fs-30 fw-b color-0">￥{{(Number(info.price) * from.count).toFixed(2)}}</text>
			</view>
			<view class="pay-btn" @click="submitOrder">
				去支付
			</view>
		</view>
		<!-- <u-calendar :show="show" @confirm="confirm"></u-calendar> -->
		<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm='confirm'></u-datetime-picker>
		<u-popup :show="popupShow" @close="close" @open="open">
			<view style="height: 100vh;width: 100%;" class="bg-white">
				<patient @save="save"></patient>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		serviceDetail
	} from "@/api/homeCare";
    import {yizhenAdd,pay} from '@/api/service'
	import patient from './patient.vue'
	export default {
		components: {
			patient
		},
		data() {
			return {
				value1: Number(new Date()),
				info: {},
				list: [],
				show: false,
				from: {
                    yuyue_time: '',
                    count: 1,
					remark: ''
				},
				service_id: '',
				type: '', //:1=护理,2=义诊/陪诊
				popupShow: false
			}
		},
		onLoad(e) {
			this.type = e.type
			this.service_id = e.service_id
			this.getDetail()
		},

		methods: {
			confirm(e) {
				this.from.yuyue_time = this.timestampToDateTime(e.value)
				this.show = false
			},
            timestampToDateTime(timestamp) {
                const date = new Date(timestamp);

                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}`
            },
			getDetail() {
				serviceDetail({
					service_id: this.service_id
				}).then(res => {
					this.info = res.data
				})
			},
			valChange() {
				// this.
			},
			open() {},
			addPatient() {
				this.popupShow = true
				uni.setNavigationBarTitle({
					title: '患者信息'
				})
				// uni.navigateTo({
				// 	url:'/pageA/service/patient'
				// })
			},
			save(info) {
				this.list = [info]
				this.popupShow = false
			},
            submitOrder(){
                let sick_json = this.list[0]
                if(this.list.length < 1){
                    uni.showToast({
                        title:'请填写患者姓名',
                        icon:'none'
                    })
                    return
                }
                if (!this.from.yuyue_time){
                    uni.showToast({
                        title:'请选择预约时间',
                        icon:'none'
                    })
                    return
                }
                let info = {
                    sick_json:sick_json,
                    yuyue_time:this.from.yuyue_time,
                    count:this.from.count,
                    remark:this.from.remark,
                    service_id:this.service_id
                }
                yizhenAdd(info).then(res=>{
                    if(res.code == 1){
                        this.pay(res.data.order_no)
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            },
            pay(order_no){
                pay({order_no }).then(res=>{
                    if (res.code ==1){

                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F7F7F7;
	}

	.info-confirm {
		.img-box {
			width: 100rpx;
			height: 100rpx;
			min-width: 100rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.solid {
		margin-top: 20rpx;
	}

	.add-box {
		justify-content: center;
		padding: 42rpx 0;

		image {
			width: 30rpx;
			margin-right: 20rpx;
		}
	}

	.list-box {
		height: 68rpx;
		align-items: center;
	}

	.num-box {
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.pay-box {
		align-items: center;
		padding: 10rpx 30rpx 62rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 162rpx;

		.pay-btn {
			width: 320rpx;
			height: 90rpx;
			color: #fff;
			line-height: 90rpx;
			text-align: center;
			background: #43ABC4;
			border-radius: 14rpx;
		}
	}

	.info-list {
		position: relative;
		padding: 20rpx 0 10rpx;

		.icon-box {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}
</style>